<template>
  <div class="edu-page-warp">
    <el-card shadow="never">
      <div>
        <div class="edu-page-title">{{$t('common.text.baseInfo')}}</div>
        <baseData :label="label" :data="data" :attrs="attrs"></baseData>
        <div class="edu-page-title">{{$t('common.text.applyDetail')}}</div>
        <el-form :model="form" label-suffix="：" ref="form" label-width="120px" :rules="rules">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item :label="$t('achievementApply.thesisTitle')">
                <el-input v-model="form.thesisTitle" maxlength="20" placeholder="" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('preDefense.preDefenseTime')">
                <el-input v-model="form.defenseDate" placeholder="" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('preDefense.defenseAddr')">
                <el-input v-model="form.defenseAddr" placeholder="" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item :label="$t('label.researchDirection')">
                <!--<DictSelect v-model="form.researchField" :data="options.direction" placeholder="" disabled></DictSelect>-->
                 <el-input v-model="form.researchField" placeholder="" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item :label="$t('preDefense.researchResults')">
                <el-input v-model="form.researchResult" type="textarea" maxlength="200" :rows="5" resize="none"
                          placeholder="" disabled></el-input>
              </el-form-item>
            </el-col>
                  <span v-if="footerFlag">
                    <el-col :span="24" >
                        <el-form-item :label="$t('achievementApply.reviews')" prop="reviewExpert">
                          <el-button @click="addRow" :disabled="editFlag">{{$t('message.add')}}</el-button>
                          <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="expertName" :label="$t('label.stuName')" min-width="100">
                              <template slot-scope="scope">
                                <el-input :disabled="editFlag" v-model="scope.row.expertName" placeholder=""
                                          maxlength="64"></el-input>
                              </template>
                            </el-table-column>
                            <el-table-column prop="jobTitle" :label="$t('courseSummary.teacherTitle')" min-width="100">
                              <template slot-scope="scope">
                                <el-input :disabled="editFlag" v-model="scope.row.jobTitle" placeholder=""
                                          maxlength="64"></el-input>
                              </template>
                            </el-table-column>
                            <el-table-column prop="doctoralAdvisorFlag" :label="$t('preDefense.doctoralAdvisorFlag')" min-width="100">
                              <template slot-scope="scope">
                                <el-select :disabled="editFlag" v-model="scope.row.doctoralAdvisorFlag" :placeholder="$t('message.plzSelect')">
                                  <el-option
                                    v-for="item in currentOptions.doctoralAdvisorFlag"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                                </el-select>
                              </template>
                            </el-table-column>
                            <el-table-column prop="company" :label="$t('preDefense.company')" min-width="150">
                              <template slot-scope="scope">
                                <el-input :disabled="editFlag" v-model="scope.row.company" placeholder=""
                                          maxlength="64"></el-input>
                              </template>
                            </el-table-column>
                            <el-table-column v-if="!editFlag" :label="$t('nonPublicCourseOpen.operation')" min-width="80">
                              <template slot-scope="scope">
                                <el-button type="text" @click="removeExpertData(scope.$index)">{{$t('message.delete')}}</el-button>
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('achievementApply.reviewsIdea')" prop="expertSuggestion">
                          <el-input v-model="form.expertSuggestion" type="textarea" maxlength="200" :rows="5" resize="none" :placeholder="editFlag?'':$t('inputPlaceholder')" :disabled="editFlag"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('achievementApply.improve')" prop="improvement">
                          <el-input v-model="form.improvement" type="textarea" maxlength="200" :rows="5" resize="none" :placeholder="editFlag?'':$t('inputPlaceholder')" :disabled="editFlag"></el-input>
                        </el-form-item>
                    </el-col>
                  </span>
                  <el-col :span="24" v-if="!footerFlag&&!fromCheckDetail">
                      <el-form-item :label="$t('courseSummary.applySuggest')+''">
                          <el-input v-if="detailsFlag" v-model="form.remark" type="textarea" maxlength="64" :rows="5" resize="none" :placeholder="detailsFlag?'':$t('inputPlaceholder')" :disabled="detailsFlag"></el-input>
                          <el-input v-else v-model="audits.msg" type="textarea" maxlength="64" :rows="5" resize="none" :placeholder="detailsFlag?'':$t('inputPlaceholder')" :disabled="detailsFlag"></el-input>
                      </el-form-item>
                  </el-col>
              </el-row>
        </el-form>
      </div>
      <div class="con_footer" v-if="footerFlag&&detailsFlag">
        <el-button type="primary" class="con_footer_sure" @click="submits">{{$t('message.submit')}}</el-button>
        <el-button @click="back">{{$t('message.cancel')}}</el-button>
      </div>
      <div v-if="!footerFlag&&!detailsFlag" class="con_footer1">
        <el-button :disabled="fromCheckDetail" type="danger" @click="audit('unpass')">{{$t('achievementApply.refuse')}}</el-button>
        <el-button :disabled="fromCheckDetail" type="primary" @click="audit('pass')">{{$t('message.pass')}}</el-button>
      </div>
    </el-card>
    </div>
</template>

<script>
import { applyInputOpinion, applyDetail } from "common/src/api/preDefense";
import baseData from '../common/baseData';
import commonMixins from 'common/src/views/practiceManagement/commonMixins';
import moment from 'moment';
export default {
    components: {
      baseData
    },
    mixins: [commonMixins],
    props: {
        footerFlag: { // 是否为审核 false 为审核页面
            type: Boolean,
            default: true
        },
        editFlag: { // ture不可编辑
            type: Boolean,
            default: false
        },
        detailsFlag: { // true 审核详情
            type: Boolean,
            default: false
        },
        row: {
          type: Object,
          default: {}
        },
        options: {
          type: Object,
          default: {}
        },
        fromCheckDetail: {
          type: String,
          default: ""
        },
        rollInfo:{
          type: Object,
          default: {}
        },
    },
    data() {
        return {
            form: {
              thesisTitle: '', //论文题目
              defenseDate: '', //预答辩时间
              defenseAddr: '', //预答辩地点
              researchField: '', //研究内容方向
              researchResult: '', //研究成果
              reviewExpert: '', //评审专家
              expertSuggestion: '', //专家评审意见
              improvement: '' //拟改进措施
            },
            rules: {
                reviewExpert: [{ required: true, validator: this.validateEcpert, trigger: 'blur' }],
                expertSuggestion: [{ required: true, validator: this.validateInput, trigger: 'blur' }],
                improvement: [{ required: true, validator: this.validateInput, trigger: 'blur' }]
            },
            attrs: {
              width: '90px'
            },
            data: {},
            label: [
              { label: this.$t('label.stuCode'), prop: 'stuNo' },
              { label: this.$t('label.stuName'), prop: 'stuName' },
              { label: this.$t('label.college'), prop: 'academyName' },
              { label: this.$t('label.major'), prop: 'majorName' },
              { label: this.$t('label.grade'), prop: 'grade' },
              { label: this.$t('label.trainingLevel'), prop: 'eduLevelI18n' },
              { label: this.$t('label.trainingCategory'), prop: 'eduModeI18n' },
              { label: this.$t('label.degreeCategory'), prop: 'degreeTypeI18n' },
              { label: this.$t('label.formLearning'), prop: 'studyFormI18n' },
              { label: this.$t('achievementApply.teacherName'), prop: 'stuTutorName' }
            ],
            currentOptions: {
              doctoralAdvisorFlag: [
                  { label: this.$t('message.yes'), value: 'Y' },
                  { label: this.$t('message.no'), value: 'N' }
              ],
            },
            tableData: [],
            audits: {
              msg: '',
              staus: ''
            }
        };
    },
    computed: {

    },
    created() {
    },
    mounted() {
      // id存在则查详情数据
      if (this.row.id) {
        this.getDetail();
      }else if(this.rollInfo.content){
        this.form=this.rollInfo.content;
        this.data=this.rollInfo.content;
      }
      for (let i = 0; i < 5; i++) {
        let emptyRow = { id: i, defenesApplyId: this.row.id };
        this.tableData.push(emptyRow);
      }
    },
    methods: {
        submits() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                  let expertData = this.tableData;
                  let param = {
                    'id': this.row.id,
                    'expertSuggestion': this.form.expertSuggestion,
                    'improvement': this.form.improvement,
                    'preDefenseApplyExpertTs': this.tableData
                  };
                  console.log('param :>> ', param);
                  applyInputOpinion(param).then(res => {
                    if (res.code === 200) {
                      this.$message({
                        type: "success",
                        message: this.$t("message.submitSuccess")
                      });
                      this.back();
                    }
                  });
                }
            })
        },
        back() {
          this.$emit('emit:back');
        },
        audit(type) { // 审核
          this.audits.staus = type;
          this.$emit('emit:complete');
        },
        // 新增一行评审专家
        addRow () {
          let emptyRow = { id: this.tableData.length, defenesApplyId: this.row.id };
          this.tableData.push(emptyRow);
        },
        // 校验评审专家
        validateEcpert (rule, value, callback) {
          let nameInfo = this.tableData.filter(v => v.expertName !== '' && v.expertName);
          let nameText = this.tableData.map(v=>v.expertName).join(',');
          let jobTitleText = this.tableData.map(v=>v.jobTitle).join(',');
          let companyText = this.tableData.map(v=>v.company).join(',');
          let allText = nameText + '' + jobTitleText + '' + companyText;
          if (this.tableData.length === 0 || !this.tableData) {
            return callback(new Error(this.$t('inputPlaceholder')));
          }
          if (nameInfo.length !== this.tableData.length) {
            return callback(new Error(this.$t('preDefense.inputName')));
          }
          if (allText.includes('$')) {
            return callback(new Error(this.$t('achievementApply.specilTips')));
          }

          this.tableData.map(v => {
            if ((v.expertName && v.expertName.length > 64) || (v.jobTitle && v.jobTitle.length > 64) || (v.company && v.company.length > 64)) {
              return callback(new Error(this.$t('achievementApply.lengthTip')));
            }
          })


          return callback();
        },
        // 移除评审专家数据
        removeExpertData (index) {
          this.tableData.splice(index, 1);
        },
        // 根据申请id查询详情
        getDetail () {
          applyDetail(this.row.id).then(res => {
            if (res.code === 200) {
              let resultData = res.data;
              this.data = resultData;
              if (this.editFlag || resultData.improvement) {
                this.form = resultData;
                this.form.defenseDate = moment(resultData.defenseDate).format('YYYY-MM-DD');
                this.tableData = resultData.preDefenseApplyExpertTs;
                return;
              }
              this.form.thesisTitle = resultData.thesisTitle;
              this.form.defenseDate = moment(resultData.defenseDate).format('YYYY-MM-DD');
              this.form.defenseAddr = resultData.defenseAddr;
              this.form.researchField = resultData.researchField;
              this.form.researchResult = resultData.researchResult;
              this.audits.msg = resultData.remark;
            }
          });
        }
    }
};
</script>

<style scoped lang="scss">
.con {
    background-color: white;
    &_footer {
        display: flex;
        flex-direction: row-reverse;
        &_sure {
            margin-left: 20px;
        }
    }
    &_footer1 {
        padding-left: 120px;
    }
}
</style>
